<!DOCTYPE html>
<html>
  <head>
    <title>悦淘新房</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
      <link rel="stylesheet" href="${s.base}/mobile/base/css/weui.min.css">
      <link rel="stylesheet" href="${s.base}/mobile/base/css/jquery-weui.css">
      <link rel="stylesheet" href="${s.base}/mobile/wechat/css/base.css">
      <link rel="stylesheet" href="${s.base}/mobile/wechat/css/component.css">
    <link rel="stylesheet" href="${s.base}/mobile/wechat/css/xq.css">
      <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.13&key=18997a286e73c2d94837b10f89516387"></script>
  </head>
  <body>
 <!-- <div class="xyg-nav">
	  <div class="xyg-nav-content">
	  	<span onclick="history.go(-1);"><svg class="icon" aria-hidden="true"><use xlink:href="#iconxiangzuo"></use></svg></span>
	  	悦淘新房
        <span class="xyg-nav-content-right" onclick="shareShow()"><svg class="icon icon_size" aria-hidden="true"><use xlink:href="#iconfenxiang2"></use></svg></span>
	  </div>
  </div> -->
  <div class="xyg-index">
   <style type="text/css">
   .xyg-comp-banner{
	width:96%;
	margin:0px 2%;
	height:8rem;
	border-radius:0.5rem;
	}
	.xyg-comp-banner img{
		width:100%;
		border-radius:0.5rem;
		height:8rem;
	}
	  .font1{font-size:1rem; color:#F00; font-weight: bold;}
	  .font2{font-size:0.6rem; color:#9f9fa0;letter-spacing:0.01rem;}
	  .font3{font-size:0.6rem; color:#333; letter-spacing:0.01rem;}
	  .line-height1{height:1.5rem; line-height:1.5rem;}
	  .line-height2{height:1.1rem; line-height:1.1rem;}
	  html,body{background:#f5f5f5;}
	  .xyg-content{width:100%; height:auto;}
	  .xyg-content .xyg-content-item{width:100%; height:auto;padding-bottom:0.2rem; margin-bottom:0.5rem;}
	  .xyg-content .xyg-content-item .xyg-content-item-pic{width:100%; height:8rem; background:#F5F5F5;}
	  .xyg-content .xyg-content-item .xyg-content-item-content{width:100%; height:auto; }
	  .xyg-content .xyg-content-item .xyg-content-item-content .xyg-content-item-content-tip{width:96%; margin:0px 2%;}
	  .xyg-content-desc{width: 96%; margin:0px 2%;height: auto; background: #ffffff; padding-top:10px;}
	  .xyg-content-desc .xyg-content-desc-title{width: 100%; height:auto;}
	  .xyg-content-desc .xyg-content-desc-title-item{width:auto; padding:0px 0.5rem; float:left; height:2rem; line-height:2rem; color:#9f9fa0; font-size:14px; font-weight:bold;}
	  .xyg-content-desc .select-active{ color:#000000;}
	.xyg-content-desc .xyg-content-desc-content{width: 96%; margin-left: 2%; min-height: 300px;}
	.xyg-content-desc .xyg-content-desc-content .xyg-content-desc-content-title{width: 96%; margin-left: 2%; font-size:16px; font-weight:bold; color:#09ba07; letter-spacing:0.02rem; margin-bottom: 0.2rem;}
	.xyg-content-desc .xyg-content-desc-share{width: 96%; margin-left: 2%; height:1.2rem; line-height:1.2rem; padding:0.2rem 0px 0.8rem 0px; font-size:0.8rem; color:#9f9fa0;}
	.xyg-content-desc .xyg-content-desc-share span{font-size:1rem; color:#CC0000; font-weight:bold;}
	.xyg-content-desc .xyg-content-desc-share .xyg-content-desc-share-font{width:1.2rem; height:1.2rem; line-height:1.2rem;font-size:0.8rem; color:#FFFFFF; background:#CC0000; border-radius:0.6rem; text-align:center; float:left;}
   .xyg-content-user{width: 96%; margin:0px 2%;height: auto; background: #ffffff; margin-top:0.5rem; padding:0.5rem 0px;}
   .xyg-content-user .xyg-content-user-content{width: 96%; margin: 0px 2%; height:auto;}
   .xyg-content-user .xyg-content-user-desc{width: 96%; margin: 0px 2%; height:auto; line-height:1rem; font-size:0.6rem; color:#9f9fa0;}
   .xyg-content-user .xyg-content-user-content-left{ width:70%; height:2.3rem; float:left;}
   .xyg-content-user .xyg-content-user-content-left img{ width:2rem; height:2rem; border-radius:1rem; float:left;}
   .xyg-content-user .xyg-content-user-content-left .xyg-content-user-content-left-tip{ margin-left:2.3rem;}
   .xyg-content-user .xyg-content-user-content-left .xyg-content-user-content-left-tip-title{ width:auto; height:1.2rem; line-height:1.2rem; font-size:0.8rem; font-weight:bold; color:#000000;}
   .xyg-content-user .xyg-content-user-content-left .xyg-content-user-content-left-tip-desc{ width:auto; height:0.8rem; line-height:0.8rem; font-size:0.6rem; color:#09ba07;}
   .xyg-content-user .xyg-content-user-content-right{ width:30%; height:2.3rem; float:left;}
   .xyg-content-user .xyg-content-user-content-right .xyg-content-user-content-right-tip{ width:auto; text-align:center; height:1rem; line-height:1rem;padding:0.2rem 0.2rem; border-radius:0.6rem; margin-right:0.2rem;}
   .xyg-map-content {
       height: auto;
       width: 90%;
       margin: 0.5rem 5%;
   }
   .xyg-map-content .mapContent {
       height: 10rem;
       width: 100%;
   }
   .amap-icon img {
       width: 25px;
       height: 34px;
   }
   /****************底部 菜单开始*********************/
   .xyg-buy-bottom{width:100%;height:auto; position: fixed; bottom: 0px; border-top: 1px solid #d1d1d1;left: 0px;background:#ffffff;}
   .xyg-buy-bottom .xyg-buy-bottom-item{width:15%;height:auto; float: left; padding:0.2rem 0px; text-align: center;}
   .xyg-buy-bottom .xyg-buy-bottom-item1{width:35%;height:auto; float: left; padding:0.2rem 0px; text-align: center;}
   .xyg-buy-bottom .xyg-buy-bottom-item1 .xyg-buy-bottom-item1-pay{width:90%; height:1.4rem; line-height: 1.4rem; margin:0.3rem 0px; font-size: 14px; color:#fff; border-radius:0.7rem; background:#FF3232; letter-spacing:0.1rem; }
   .xyg-buy-bottom .xyg-buy-bottom-item img{max-width:100%; height:1.2rem; width: auto; margin:0.05rem auto;}
   .xyg-buy-bottom .xyg-buy-bottom-item .xyg-buy-bottom-item-text{width:100%; height:0.8rem; line-height: 1rem; font-size: 14px; color:#333; }
   .xyg-buy-bottom .xyg-buy-bottom-item .select-text{color:#0B6C3F; }
   /****************底部 菜单结束*********************/

   .weui-article{padding: 2px 0px;}
  </style>
   <div class="xyg-content">
  	<div class="xyg-content-item">
  		<div class="xyg-content-item-pic">
		  <!--banner图开始-->
          <div class="xyg-comp-banner swiper-container">
              <div class="swiper-wrapper">
                  <#list hostItem.imageList as image>
                      <div class="swiper-slide"><img src="${image}" /></div>
                  </#list>
              </div>
              <div class="swiper-pagination xyg-comp-banner-swiper"></div>
          </div>
          <!--banner图结束-->
		</div>
		<div class="xyg-content-item-content">
			<div class="xyg-content-item-content-tip line-height1">
			参考价<span class="font1">${hostItem.price}</span>元/平<span style="float:right;" class="font2">${hostItem.name}</span>
			</div>
           <div class="xyg-content-item-content-tip font3 line-height2">
			<span class="font3"><svg class="icon" aria-hidden="true"><use xlink:href="#iconloufang"></use></svg>&nbsp;</span>&nbsp;${hostItem.minRooms}-${hostItem.maxRooms}室|${hostItem.minApartmentArea}-${hostItem.maxApartmentArea}m2
			</div>
           <div class="xyg-content-item-content-tip font3">
			<span class="font3"><svg class="icon" aria-hidden="true"><use xlink:href="#icondizhi"></use></svg>&nbsp;</span>&nbsp;${hostItem.cityName}${hostItem.areaName}${hostItem.address}
			</div>
		</div>
  	</div>
  </div>
  <!--内容结束-->
  <!--详情开始-->
  <div class="xyg-content-desc">
  	<div class="xyg-content-desc-title">
    	<div class="xyg-content-desc-title-item select-active"  onclick="change(1,this)">
    	我要分销
        </div>
        <div class="xyg-content-desc-title-item" onclick="change(2,this)">
    	楼盘详情
        </div>
        <div class="clearBoth"></div>
     </div>
     <div class="xyg-content-desc-share fxClass">
         <article class="weui-article">
             ${hostItem.shareMoney}
         </article>
	 </div>
  	 <div class="xyg-content-desc-content nrClass" style="display:none;">
       <article class="weui-article">
           ${hostItem.content}
       </article>
	 </div>
  </div>
      <#if hostItem.userName??>
          <div class="xyg-content-user fxClass">
              <div class="xyg-content-user-content">
                  <div class="xyg-content-user-content-left">
                      <img src="${hostItem.userLogo}"/>
                      <div class="xyg-content-user-content-left-tip">
                          <div class="xyg-content-user-content-left-tip-title">
                              ${hostItem.userName}
                          </div>
                          <div class="xyg-content-user-content-left-tip-desc">
                              楼盘负责人
                          </div>
                      </div>
                  </div>
                  <div class="xyg-content-user-content-right">
                      <div class="xyg-content-user-content-right-tip border">
                          <a href="tel:${hostItem.userPhone}" style="color: #9f9fa0;"><svg class="icon" aria-hidden="true"><use xlink:href="#icondianhua"></use></svg>联系我</a>
                      </div>
                  </div>
                  <div class="clearBoth"></div>
              </div>
              <div class="xyg-content-user-desc">
                  我是${hostItem.name}楼盘负责人，有事情赶快联系我！
              </div>
          </div>
          <#list hostSettledList as hostSettled>
              <div class="xyg-content-user fxClass">
                  <div class="xyg-content-user-content">
                      <div class="xyg-content-user-content-left">
                          <img src="${hostSettled.headImage}"/>
                          <div class="xyg-content-user-content-left-tip">
                              <div class="xyg-content-user-content-left-tip-title">
                                  ${hostSettled.name}
                              </div>
                              <div class="xyg-content-user-content-left-tip-desc">
                                  驻守人员
                              </div>
                          </div>
                      </div>
                      <div class="xyg-content-user-content-right">
                          <div class="xyg-content-user-content-right-tip border">
                              <a href="tel:${hostSettled.phone}" style="color: #9f9fa0;"><svg class="icon" aria-hidden="true"><use xlink:href="#icondianhua"></use></svg>联系我</a>
                          </div>
                      </div>
                      <div class="clearBoth"></div>
                  </div>
                  <div class="xyg-content-user-desc">
                      我是${hostSettled.name}楼盘驻守人员，有事情赶快联系我！
                  </div>
              </div>
          </#list>

      </#if>

  <!--详情结束-->
  </div>
  <#if hostItem.latitude??&&hostItem.longitude??>
  <div class="xyg-map-content" >
      <div id="container_map" class="mapContent" onclick="test()">
         <input type="hidden" id="longitude" value="${hostItem.longitude}">
          <input type="hidden" id="latitude" value="${hostItem.latitude}">
          <input type="hidden" id="hostName" value="${hostItem.name}">
          <input type="hidden" id="hostAddress" value="${hostItem.cityName}${hostItem.areaName}${hostItem.address}">
      </div>
  </div>
  </#if>
  <!--底部菜单开始-->
  <div style="width:100%; height:2.5rem;"></div>
     <div class="xyg-buy-bottom">
         <div class="xyg-buy-bottom-item">
         <a href="javascript:shareShow()">
             <img src="${s.base}/mobile/wechat/images/menu_icon_3.png"/>
             <div class="xyg-buy-bottom-item-text ">分享</div>
             </a>
         </div>
        	<div class="xyg-buy-bottom-item">
        		<a href="tel:${hostItem.userPhone}">
        		<img src="${s.base}/mobile/wechat/images/menu_icon_4.png"/>
        		<div class="xyg-buy-bottom-item-text">致电</div>
        		</a>
        	</div>
         <#if webMember.phone==""||webMember.phone==null>
             <div class="xyg-buy-bottom-item1" onclick="$.alert('您还没有完善个人信息，请先完善个人信息吧！',function () {goWdmpPage('${memberId}');});">
                 <div class="xyg-buy-bottom-item1-pay">驻守推广</div>
             </div>
             <#else>
                 <div class="xyg-buy-bottom-item1" onclick="goSettledPage('${memberId}','${hostItem.id}')">
                     <div class="xyg-buy-bottom-item1-pay">驻守推广</div>
                 </div>
         </#if>

         <#if webMember.grade=='2'>
             <div class="xyg-buy-bottom-item1" onclick="goWybbPage('${memberId}','${currentCity.id}','${hostItem.id}')">
                 <div class="xyg-buy-bottom-item1-pay">我要报备</div>
             </div>
             <#else>
                 <div class="xyg-buy-bottom-item1" onclick="$.alert('只有经纪人才能报备信息，赶快去申请成为经纪人吧！',function () {goSQJJRPage('${memberId}');});">
                     <div class="xyg-buy-bottom-item1-pay">我要报备</div>
                 </div>
         </#if>

        	<div class="clearBoth"></div>
        </div>
     <!--底部菜单结束-->
  </body>
  <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
  <script src="${s.base}/mobile/base/js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
  <script src="${s.base}/mobile/base/js/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
  <script src="${s.base}/mobile/base/js/swiper.js" type="text/javascript" charset="utf-8"></script>
  <script src="${s.base}/mobile/base/js/component.js" type="text/javascript" charset="utf-8"></script>
  <script src="${s.base}/mobile/wechat/fonts/iconfont.js"></script>
  <script src="${s.base}/mobile/wechat/js/window_port.js"></script>
  <script src="${s.base}/mobile/wechat/js/base.js"></script>
  <!--js分享代码开始-->
  <input type="hidden" value="${jSTicketShareResponse.appid}" id="appid" />
  <input type="hidden" value="${jSTicketShareResponse.fxTitle}" id="fxTitle" />
  <input type="hidden" value="${jSTicketShareResponse.fxImgUrl}" id="fxImgUrl" />
  <input type="hidden" value="${jSTicketShareResponse.fxDesc}" id="fxDesc" />
  <input type="hidden" value="${jSTicketShareResponse.fxUrl}&path=/weChat/xq&pathParams=id*${hostItem.id},share*2" id="fxUrl" />
  <input type="hidden" value="${jSTicketShareResponse.nonceStr}" id="nonceStr" />
  <input type="hidden" value="${jSTicketShareResponse.timestamp}" id="timestamp" />
  <input type="hidden" value="${jSTicketShareResponse.signature}" id="signature" />
  <script src="${s.base}/mobile/base/js/share.js"></script>

  <script type="text/javascript">
	function initDate(){
		$.fn.initXygCompBanner();
	}

	function test() {
        var longitude = $("#longitude").val();
        var latitude = $("#latitude").val();
        var hostName = $("#hostName").val();
        var hostAddress = $("#hostAddress").val();
        wx.openLocation({
            latitude:latitude*1, // 纬度，浮点数，范围为90 ~ -90
            longitude:longitude*1, // 经度，浮点数，范围为180 ~ -180。
            name: hostName, // 位置名
            address:hostAddress, // 地址详情说明
            infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
        });
    }

  	$(document).ready(function(e) {
		initDate();
        var longitude = $("#longitude").val();
        var latitude = $("#latitude").val();
        setContent("container_map",longitude*1,latitude*1);
    });
	function change(type,obj) {
	    $(".xyg-content-desc-title-item").removeClass("select-active");
	    $(obj).addClass("select-active");
        if(type==1){
            //分佣
            $(".fxClass").show();
            $(".nrClass").hide();
        }else{
            //详情
            $(".fxClass").hide();
            $(".nrClass").show();
        }
    }

    function setContent(id,jd,wd){
        var map = new AMap.Map(id, {
            resizeEnable: true,
            center: [jd, wd],
            zoom: 13
        });
        var marker = new AMap.Marker({
            position: map.getCenter(),
            icon: '${s.base}/mobile/wechat/images/poi-marker-default.png',
            offset: new AMap.Pixel(-13, -30)
        });
        marker.setMap(map);
        // 设置label标签
        // label默认蓝框白底左上角显示，样式className为：amap-marker-label
        /*marker.setLabel({
         //修改label相对于maker的位置
         offset: new AMap.Pixel(20, 20),
         content: "<div class='info'>联系人:"+name+"<br/>联系电话:"+phone+"</div>"
         });*/
    }
    </script>
  
</html>

